<template>
  <div class="chart-wrapper" ref="lineChart"></div>
</template>

<script>
import echarts from "echarts";
import { onMounted, onBeforeUnmount, ref, watch } from "vue";
import { debounce } from "@/utils/index.js";
import useResize from "@/componentApi/useResize.js";
import { selectOtherData } from "@/api/mockChart";

export default {
  name: "lineChart",
  setup() {
    let { abcode, year, parentInfo, routerChange } = useResize();

    const lineChart = ref(null);
    let myChart = ref(null);

    const resizeHandler = debounce(() => {
      if (myChart) {
        myChart.resize();
      }
    }, 200);

    onMounted(() => {
      getChartData();
      window.addEventListener("resize", resizeHandler);
    });
    onBeforeUnmount(() => {
      window.removeEventListener("resize", resizeHandler);
    });

    //模拟接口，获取echarts数据
    const getChartData = async () => {
      const { data } = await selectOtherData({
        abcode,
        year,
      });
      initEcharts(data);
    };

    //渲染echarts图
    const initEcharts = (data) => {
      myChart = echarts.init(lineChart.value);
      myChart.setOption(
        {
          grid: {
            left: "50",
            right: "20",
            bottom: "80",
            top: "80",
          },
          title: {
            show: data.length === 0,
            year: "right",
            left: "right",
            text: "暂无数据",
            textStyle: {
              color: "rgb(179, 239, 255)",
              fontSize: 12,
            },
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "line",
            },
          },
          // toolbox: { 工具栏
          //   feature: {
          //     dataView: {
          //       show: false,
          //     },
          //     magicType: {
          //       show: true,
          //       type: ["line", "bar"],
          //     },
          //     restore: {
          //       show: false,
          //     },
          //     saveAsImage: {
          //       show: true,
          //       name: year.value + "同行业销售额对比",
          //       pixelRatio: 2,
          //     },
          //   },
          //   iconStyle: {
          //     normal: {
          //       borderColor: "#1990DA",
          //     },
          //   },
          //   top: 0,
          //   right: 5,
          // },
          dataZoom: [
            {
              type: "inside",
              startValue: 0,
              endValue: 12,
            },
          ],
          legend: {
            show: true,
            right: "15",
            top: "0",
            itemWidth: 15,
            itemHeight: 11,
            textStyle: {
              color: "#00a9fb",
            },
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: "#397cbc",
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#cecece",
                fontSize: 12,
              },
              rotate: 15,
            },
            data: data.map((item) => item.name),
          },
          yAxis: [
            {
              type: "value",
              name: "（万元）",
              nameTextStyle: {
                color: "#fff",
                fontSize: 12,
              },
              scale: true,
              axisTick: {
                show: true,
              },
              axisLabel: {
                textStyle: {
                  fontSize: 12,
                  color: "#cecece",
                },
              },
              axisLine: {
                lineStyle: {
                  color: "#397cbc",
                },
              },
              //网格线
              splitLine: {
                lineStyle: {
                  color: "#11366e",
                },
              },
            },
          ],
          series: [
            {
              name: "放款",
              type: "line",
              data: data.map((item) => item.value),
              smooth: true,
              label: {
                show: true,
                position: "top",
              },
              itemStyle: {
                color: "#01E4FF",
              },
              lineStyle: {
                normal: {
                  width: 2,
                  color: "#01E4FF", // 线条颜色
                },
                borderColor: "#01E4FF",
              },
              areaStyle: {
                normal: {
                  color: "rgb(34,113,132)",
                  shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
                  shadowBlur: 20,
                },
              },
            },
            {
              name: "回款",
              type: "line",
              barWidth: "10",
              data: data.map((item) => item.other),
              smooth: true, //是否平滑曲线显示
              label: {
                show: true,
                position: "top",
              },
              itemStyle: {
                color: "#00EA0D",
              },
              lineStyle: {
                normal: {
                  width: 2,
                  color: "#00EA0D", // 线条颜色
                },
                borderColor: "#00EA0D",
              },
              areaStyle: {
                normal: {
                  color: "rgb(46,168,176)",
                  shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
                },
              },

              // symbol: "circle", //折线点设置为实心点
              // symbolSize: 8, //折线点的大小
              // itemStyle: {
              //   normal: {
              //     color: "#00BCFF", //折线点的颜色
              //     lineStyle: {
              //       color: "#00BCFF", //折线的颜色
              //     },
              //   },
              // },
            },
          ],
        },
        true
      );
    };

    watch();
    // year,
    // (nl, ol) => {
    //   getChartData();
    // },
    // { lazy: false }

    watch();
    // parentInfo,
    // (nl, ol) => {
    //   getChartData();
    // },
    // { lazy: false, deep: true }

    return {
      lineChart,
    };
  },
};
</script>
